<template>
  <div class="registerDetail">
    <van-nav-bar :fixed="true" :placeholder="true" :title="$route.meta.title" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!-- 单车详情 -->
    <div class="detail_header flex">
      <div class="detail_header_lt">
        <div class="carNo flex">
          {{ dataSource.taskName }}
          <i class="iconfont icon-right"></i>
        </div>
        <div class="hank flex">
          <div class="name">{{ dataSource.customerName }}</div>
          <div class="carName">{{ dataSource.carModelName }}</div>
        </div>
      </div>
      <div class="detail_header_rt">
        <a class="flex" @click="handleTel(dataSource.ownerPhone)">
          <i class="iconfont icon-tel"></i>
          <div class="txt">联系车主</div>
        </a>
      </div>
    </div>
    <!-- 表单 -->
    <div class="formData">
      <van-form @submit="formOnSubmit" ref="form">
        <van-field
          v-model="formData.followResultName"
          name="跟进结果"
          label="跟进结果"
          input-align="right"
          placeholder="请选择"
          right-icon="arrow"
          readonly
          @click="handleSelect('followResult', 'followResultName')"
          required
          :rules="[{ required: true }]"
        />
        <van-field
          v-model="formData.followTypeName"
          name="跟进方式"
          label="跟进方式"
          input-align="right"
          placeholder="请选择"
          right-icon="arrow"
          readonly
          @click="handleSelect('followType', 'followTypeName')"
        />
        <van-field
          v-model="formData.followPersonName"
          name="跟进人员"
          label="跟进人员"
          input-align="right"
          placeholder="请选择"
          right-icon="arrow"
          readonly
        />
        <!-- @click="handleSelect('followPersonID', 'followPersonName')" -->

        <van-field
          readonly
          clickable
          name="跟进时间"
          :value="formData.followDate"
          input-align="right"
          label="跟进时间"
          placeholder="请选择时间"
          @click="handleSelectTime('followDate')"
          right-icon="arrow"
        />
        <van-field
          v-if="formData.followResult == 'follow'"
          readonly
          clickable
          name="下次跟进时间"
          :value="formData.nextFollowDate"
          input-align="right"
          label="下次跟进时间"
          placeholder="请选择下次跟进时间"
          @click="handleSelectTime('nextFollowDate')"
          right-icon="arrow"
          required
          :rules="[{ required: true }]"
        />
        <van-field
          v-if="formData.followResult == 'success' && dataSource.taskTypeName != '续保到期提醒'"
          readonly
          clickable
          name="预约进场时间"
          :value="formData.bookingInDate"
          input-align="right"
          label="预约进场时间"
          placeholder="请选择时间"
          @click="handleSelectTime('bookingInDate')"
          right-icon="arrow"
          required
          :rules="[{ required: true }]"
        />

        <van-field
          v-if="formData.followResult == 'success' && dataSource.taskTypeName != '续保到期提醒'"
          v-model="formData.fixCenterName"
          name="维修中心"
          label="维修中心"
          input-align="right"
          placeholder="请选择"
          readonly
          right-icon="arrow"
          @click="handleSelect('fixCenterId', 'fixCenterName')"
          required
          :rules="[{ required: true }]"
        />

        <van-field
          v-if="formData.followResult == 'success' && dataSource.taskTypeName != '续保到期提醒'"
          v-model="formData.empName"
          name="服务顾问"
          label="服务顾问"
          input-align="right"
          placeholder="请选择"
          right-icon="arrow"
          @click="handleSelect('empId', 'empName')"
          readonly
          required
          :rules="[{ required: true }]"
        />
        <van-field
          v-if="formData.followResult == 'success' && dataSource.taskTypeName != '续保到期提醒'"
          v-model="formData.bookingName"
          name="预约类型"
          label="预约类型"
          input-align="right"
          placeholder="请选择"
          right-icon="arrow"
          readonly
          @click="handleSelect('bookingType', 'bookingName')"
          required
          :rules="[{ required: true }]"
        />
        <!-- <van-field
          v-if="formData.followResult == 'success'"
          v-model="formData.workBillTypeName"
          name="工单类型"
          label="工单类型"
          input-align="right"
          placeholder="请选择"
          readonly
          right-icon="arrow"
          @click="handleSelect('workBillType', 'workBillTypeName')"
          required
          :rules="[{ required: true }]"
        /> -->
        <!-- <van-field
          v-if="formData.followResult == 'success'"
          v-model="formData.repairpricetypeIdName"
          name="维修价格类型"
          label="维修价格类型"
          input-align="right"
          placeholder="请选择"
          readonly
          right-icon="arrow"
          @click="handleSelect('repairpricetypeId', 'repairpricetypeIdName')"
          required
          :rules="[{ required: true }]"
        />
        <van-field
          v-if="formData.followResult == 'success'"
          v-model="formData.materialPriceIdName"
          name="配件价格类型"
          label="配件价格类型"
          input-align="right"
          placeholder="请选择"
          readonly
          right-icon="arrow"
          @click="handleSelect('materialPriceId', 'materialPriceIdName')"
          required
          :rules="[{ required: true }]"
        /> -->

        <van-field
          v-if="formData.followResult == 'failed'"
          v-model="formData.failedName"
          name="战败原因"
          label="战败原因"
          input-align="right"
          placeholder="请选择"
          right-icon="arrow"
          readonly
          @click="handleSelect('failed', 'failedName')"
        />

        <div class="voicebox" v-if="formData.followResult == 'follow' || formData.followResult == 'success'">
          <van-field v-model="formData.followNote" name="跟进备注" label="跟进备注" type="textarea" input-align="left" placeholder="" autosize />
          <i @click="clickRecord('followNote')" class="iconfont icon-voice"></i>
        </div>

        <van-field
          v-if="dataSource.taskTypeName != '续保到期提醒' && dataSource.oneBillStauts == '未处理'"
          v-model="formData.taskNames"
          name="同步关联任务"
          label="同步关联任务"
          input-align="right"
          placeholder="请选择"
          readonly
          @click="handleMoreSelect()"
          right-icon="arrow"
        />
        <div class="voicebox" v-if="formData.followResult == 'failed'">
          <van-field v-model="formData.followSupple" name="战败说明" label="战败说明" type="textarea" input-align="left" placeholder="" autosize />
          <i @click="clickRecord('followSupple')" class="iconfont icon-voice"></i>
        </div>

        <!-- 时间选择弹窗 -->
        <van-popup v-model="showTimerPicker" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="datetime"
            @confirm="onTimeConfirm($event)"
            @cancel="showTimerPicker = false"
            :formatter="formatter"
            :max-date="maxDate"
          />
        </van-popup>

        <van-popup v-model="showTimerPicker2" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            @confirm="onTimeConfirm2($event)"
            @cancel="showTimerPicker2 = false"
            :formatter="formatter"
            :max-date="maxDate"
          />
        </van-popup>

        <!-- 下拉选择弹窗 -->
        <van-popup v-model="showSelectPicker" position="bottom">
          <van-field
            name="模糊查询"
            input-align="left"
            v-model="likeWho"
            label="模糊查询"
            v-if="likeWhoField == 'empId'"
            placeholder="请输入模糊查询关键词"
          />
          <van-picker show-toolbar :columns="columns" @confirm="handleSelectConfirm" @cancel="showSelectPicker = false" value-key="name" />
        </van-popup>

        <div class="submitBtn" @click="formOnSubmit">确认</div>
      </van-form>
      <TaskMultipleSelect
        :visible="showMultipleVisible"
        @close="showMultipleVisible = false"
        @multipleSubmit="multipleSubmit"
        :value="formData.billId"
        :list="relevanceList"
      ></TaskMultipleSelect>
    </div>
    <Voice :record-box="recordBox" @translateResult="getWords" @changeRecordBox="closeRecord" />
  </div>
</template>

<script>
import { Field, Form, DatetimePicker, Tab, Tabs, Toast, Notify } from 'vant'
import carApi from '@/api/carApi'
import taskApi from '@/api/taskApi'
import { getCookies, isPhone, getCurrentDetailTime, getCurrentDetailMin } from '@/utils/util.js'
import commonApi from '../../api/commonApi'
import TaskMultipleSelect from '../../components/TaskMultipleSelect/index'
import Voice from './voice'

export default {
  name: 'taskCenterEdit',
  components: {
    Field,
    Form,
    DatetimePicker,
    Tab,
    Tabs,
    Toast,
    TaskMultipleSelect,
    Voice,
  },
  data() {
    return {
      showTimerPicker: false,
      dataSource: {
        billId: '', //单据id
        taskTypeName: '', //任务类型
        taskName: '', //任务名称
        oneBillStatus: '', //任务一级状态
        twoBillStatus: '', //任务二级状态
        carModelName: '', //车型
        customerName: '', //客户名称
        mobile: '', //电话
        ownerName: '', //车主姓名
        ownerPhone: '', //车主电话
        codeNo: '',
      },
      formData: {
        followResult: '', //跟进结果，String，必填
        followResultName: '',
        followType: 'phone', //跟进类型,必填，String
        followTypeName: '电话', //跟进类型,必填，String
        billId: '', //父ID,必填，String
        followDate: getCurrentDetailMin(), // 跟进时间，必填
        nextFollowDate: '', //下次跟进时间，必填
        followNote: '', //跟进备注，必填
        failed: '', //战败原因，跟进结果是战败时必填
        followSupple: '', //战败补充
        userId: '', //用户ID，必填，String
        bookingType: '',
        bookingName: '',
        bookingInDate: '',
        taskNames: '',
        fixCenterId: '', //预约维修中心ID值,跟进结果是成功时必填
        fixCenterName: '',
        empId: '', //预约服务顾问id,跟进结果是成功时必填
        empName: '',
        // materialPriceId: "", //配件价格类型id,跟进结果是成功时必填
        // materialPriceIdName: "",
        // repairpricetypeId: "", //维修价格类型id,跟进结果是成功时必填
        // repairpricetypeIdName: "",
        // workBillType: "", //预约工单类型，跟进结果是成功时必填
        // workBillTypeName: "",
      },
      columns: [],
      showSelectPicker: false,
      showTimerPicker2: false,
      detailId: '',
      userId: getCookies('userId'), //用户ID，必填，String
      currentDate: new Date(),
      followResultList: [],
      followTypeList: [],
      followPersonList: [],
      failedList: [],
      bookingTypeList: [],
      relevanceList: [],
      relevanceParams: {
        codeNo: '', //车架号或者车牌号，String，必填
        pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        oneBillStatus: 'unDeal', //任务一级状态
        twoBillStatus: '', //任务二级状态
        taskTypeId: '', //任务类型ID值
        taskPersonId: '', //任务跟进人，ID值
        fixCenterId: '',
        serverPsnId: '',
        taskStartCreateTime: '',
        taskEndCreateTime: '',
        isExceed: '', //是否逾期，1为是，0为否
        isGenRepBook: '', //是否生成维修预约单
        billId: '', //本身单据ID，此为详细界面使用
        carId: '', //车辆ID，此为详细界面使用
        userId: getCookies('userId'), //用户ID，必填，String
        isFactTask: '', //是否厂家任务
        isHuiYuan: '', //是否会员客户
        isHYCar: '', //是否会员绑定车辆
      },
      showMultipleVisible: false,
      fixCenterList: [],
      bookingTypeList: [],
      workBillTypeList: [],
      repairpricetypeList: [],
      materialPriceList: [],
      userInfo: getCookies('userInfo'),
      empList: [],
      // maxDate: new Date(2024, 0, 17, 20, 20),
      maxDate: '',
      recordBox: false,
      recordName: '',
      likeWho: '',
      likeWhoField: '',
      carInfo: {},
    }
  },

  mounted() {
    if (localStorage.getItem('followId')) {
      this.detailId = localStorage.getItem('followId')
      this.getDetail(this.detailId)
      this.formData.followPersonName = JSON.parse(getCookies('userInfo')).kdusername
      this.formData.followPersonId = this.userId
    }
    // if (this.$route.query && this.$route.query.billId) {

    // }
    this.getFollowResult()
    this.getFollowType()
    this.getEmpPerson()
  },
  watch: {
    'formData.followResult': {
      handler: function (val, oldVal) {
        if (val) {
          if (val == 'failed') {
            this.getTaskFailed()
          }
          if (val == 'success') {
            this.getBookingTypeList()
            this.getMainFixCenter()
            // this.getWorkBillType();
            // this.getRepairpricetype();
            // this.getMaterialPriceType();
          }
        }
      },
      deep: true,
      immediate: false,
    },
    'formData.fixCenterId': {
      handler(val, OldVal) {
        if (val) {
          this.getServiecePerson()
        }
      },
      deep: true,
    },
    likeWho: function (nval, oval) {
      if (nval) {
        if (this.likeWhoField == 'empId') {
          let newArr = this.empList.filter((item) => {
            return item.name.indexOf(nval) > -1
          })
          console.log(newArr)
          this.columns = newArr
        } else {
          this.columns = this.empList
        }
      }
    },
  },
  methods: {
    // 点击录音
    clickRecord(name) {
      this.recordName = name
      this.recordBox = true
    },
    // 获取录音转文字
    getWords(data) {
      const formdata = this.formData
      formdata[this.recordName] = formdata[this.recordName] + data
    },
    // 关闭录音弹窗
    closeRecord(data) {
      this.recordBox = data
    },
    getCurTime() {
      let currentDate = new Date()
      this.maxDate = new Date(
        currentDate.getFullYear(),
        currentDate.getMonth(),
        new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).getDate(),
        23,
        59
      )
    },
    getDetail(billId) {
      taskApi.getCustomerTaskById({ billId, userId: this.userId }).then((res) => {
        this.dataSource = res.data
        this.formData.billId = this.dataSource.billId
        this.getRelevanceTask()
      })
    },

    // 车辆详情
    getCarInfoBase(id) {
      carApi.getCarInfoBase({ id }).then((res) => {
        if (res.code == 1) {
          this.carInfo = res.data
          this.formData.fixCenterId = res.data.fixCenterId
          this.formData.fixCenterName = res.data.fixCenterName
          this.getServiecePerson2()
        }
      })
    },
    // 获取跟进结果
    getFollowResult() {
      commonApi.getEnums({ key: 'followResult', userId: this.userId }).then((res) => {
        if (res.data) {
          this.followResultList = res.data
        }
      })
    },
    // 获取跟进方式
    getFollowType() {
      commonApi.getEnums({ key: 'followType', userId: this.userId }).then((res) => {
        if (res.data) {
          this.followTypeList = res.data
        }
      })
    },
    // 获取跟进方式
    getTaskFailed() {
      commonApi.getEnums({ key: 'taskFailed', userId: this.userId }).then((res) => {
        if (res.data) {
          this.failedList = res.data
        }
      })
    },

    // 跟进人员
    getEmpPerson() {
      commonApi
        .getEmpPerson({
          fixCenterId: '',
          userId: this.userId,
          type: 'followPerson',
        })
        .then((res) => {
          if (res.data) {
            this.followPersonList = res.data
          }
        })
    },
    // 获取服务人员
    getServiecePerson() {
      commonApi
        .getEmpPerson({
          fixCenterId: this.formData.fixCenterId,
          userId: this.userId,
          type: 'taskFollow',
        })
        .then((res) => {
          if (res.data) {
            this.empList = res.data
          }
        })
    },
    // 获取服务人员
    getServiecePerson2() {
      commonApi
        .getEmpPerson({
          fixCenterId: this.formData.fixCenterId,
          userId: this.userId,
          type: 'taskFollow',
        })
        .then((res) => {
          if (res.data) {
            this.empList = res.data
            this.formData.empId = this.carInfo.serverPsnId
            this.formData.empName = this.carInfo.serverPsnName
          }
        })
    },
    // 获取预约类型

    // getBookingTypeList() {
    //   commonApi
    //     .getEnums({
    //       key: "bookingType",
    //       userId: this.userId,
    //     })
    //     .then((res) => {
    //       if (res.data) {
    //         this.bookingTypeList = res.data;

    //       }
    //     });
    // },
    // 关联任务
    getRelevanceTask() {
      console.log(this.dataSource)
      taskApi
        .getCustomerTaskList({
          ...this.relevanceParams,
          codeNo: this.dataSource.vinCode || '',
          billId: this.dataSource.billId,
        })
        .then((res) => {
          this.relevanceList = res.data
        })
    },

    // 选择下拉
    handleSelect(field, fieldName) {
      this.showSelectPicker = true
      if (field == 'followResult') {
        this.columns = this.followResultList
      } else if (field == 'followType') {
        this.columns = this.followTypeList
      } else if (field == 'followPersonID') {
        this.columns = this.followPersonList
      } else if (field == 'failed') {
        this.columns = this.failedList
      } else if (field == 'bookingType') {
        this.columns = this.bookingTypeList
      } else if (field == 'fixCenterId') {
        this.columns = this.fixCenterList
        this.getServiecePerson()
      } else if (field == 'workBillType') {
        this.columns = this.workBillTypeList
      } else if (field == 'repairpricetypeId') {
        this.columns = this.repairpricetypeList
      } else if (field == 'materialPriceId') {
        this.columns = this.materialPriceList
      } else if (field == 'empId') {
        this.columns = this.empList
      }
      this.likeWhoField = field
      this.field = field
      this.fieldName = fieldName
    },
    // 选择下拉确认
    handleSelectConfirm(value, index) {
      if (this.field == 'materialPriceId' || this.field == 'repairpricetypeId' || this.field == 'fixCenterId' || this.field == 'empId') {
        this.formData[this.field] = value.billId
      } else {
        this.formData[this.field] = value.value
      }

      this.formData[this.fieldName] = value.name
      this.likeWho = ''
      this.likeWhoField = ''

      if (this.field == 'followResult' && value.name == '邀约成功') {
        this.getCarInfoBase(this.dataSource.carId)
      }
      if (this.field == 'fixCenterId') {
        this.formData.empId = ''
        this.formData.empName = ''
      }
      this.showSelectPicker = false
    },
    handleMoreSelect() {
      this.showMultipleVisible = true
    },
    // 多选确认
    multipleSubmit(data) {
      console.log('data', data)
      if (data && data.length != 0) {
        let arr = []
        arr.push(this.detailId)

        this.formData.taskNames = data.map((item) => item.taskName).join(',')
        let ids = data.map((item) => item.billId)
        ids.forEach((item) => {
          arr.push(item)
        })
        this.formData.billId = arr.join(';')
      } else {
        this.formData.billId = this.detailId
        this.formData.taskNames = ''
      }
    },

    onConfirm(val, field) {
      let year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      let hour = val.getHours()
      let minute = val.getMinutes()
      // let second = val.getSeconds()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`
      }
      // if (second >= 0 && second <= 9) { second = `0${second}` }
      this.formData[field] = `${year}-${month}-${day} ${hour}:${minute}:00`
      this.showTimerPicker = false
    },

    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      } else if (type === 'hour') {
        return `${value}时`
      } else if (type === 'minute') {
        return `${value}分`
      }
      //  else if (type === "second") {
      //   return `${value}秒`;
      // }
      return value
    },
    // 时间选择
    handleSelectTime(field) {
      if (field == 'followDate') {
        this.getCurTime()
      } else {
        this.maxDate = new Date(2030, 11, 30, 23, 59)
      }
      this.timeField = field
      if (field == 'nextFollowDate') {
        this.showTimerPicker2 = true
      } else {
        this.showTimerPicker = true
      }
    },
    onTimeConfirm(val) {
      let year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      let hour = val.getHours()
      let minute = val.getMinutes()
      // let second = val.getSeconds()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`
      }
      // if (second >= 0 && second <= 9) { second = `0${second}` }
      this.formData[this.timeField] = `${year}-${month}-${day} ${hour}:${minute}`
      this.showTimerPicker = false
    },
    onTimeConfirm2(val) {
      let year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      let hour = val.getHours()
      let minute = val.getMinutes()
      // let second = val.getSeconds()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`
      }
      // if (second >= 0 && second <= 9) { second = `0${second}` }
      this.formData[this.timeField] = `${year}-${month}-${day}`
      this.showTimerPicker2 = false
    },
    //维修预约
    applyRepair() {
      this.$router.push('/applyRepair')
    },
    // 获取list名称
    getFieldName(list, key, val) {
      if (list && list.length > 0) {
        let obj = list.filter((item) => {
          return item[key] == val
        })
        if (obj.length > 0) {
          return obj[0].name
        }
      }
      return null
    },
    // 判断时间是否大于1个月
    isOverOneMonth(startDateStr, endDateStr) {
      var start = new Date(startDateStr) // 将起始日期字符串转换为 Date 对象
      var end = new Date(endDateStr) // 将结束日期字符串转换为 Date 对象
      var diffTime = Math.abs(end - start) // 计算两个日期相差的毫秒数
      var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) // 将毫秒数转换成天数并向上取整
      return diffDays > 30 // 如果相差的天数大于30天则返回 true，表示超过了一个月；反之返回 false
    },

    formOnSubmit() {
      this.$refs.form
        .validate()
        .then(() => {
          if (this.formData.followResult == 'follow' && this.isOverOneMonth(this.formData.followDate, this.formData.nextFollowDate)) {
            Notify({
              type: 'danger',
              message: '下次跟进时间不能超过跟进时间一个月',
            })
            return
          }

          if (this.formData.followResult == 'success' && this.isOverOneMonth(this.formData.followDate, this.formData.bookingInDate)) {
            Notify({
              type: 'danger',
              message: '预约进场时间不能超过跟进时间一个月',
            })
            return
          }

          if (this.formData.followNote == '') {
            this.formData.followNote = `由【${this.dataSource.taskName}${
              this.formData.taskNames ? '、' + this.formData.taskNames : ''
            }】,关联生成，任务跟进人：${JSON.parse(this.userInfo).kdusername}`
          }

          let data = JSON.parse(JSON.stringify(this.formData))
          data.bookingInDate = data.bookingInDate ? data.bookingInDate + ':00' : ''
          data.nextFollowDate = data.nextFollowDate ? data.nextFollowDate + ' 00:00:00' : ''
          data.followDate = data.followDate ? data.followDate + ':00' : ''
          if (data.followResult != 'follow') {
            data.nextFollowDate = ''
          }
          taskApi
            .addNewCustomerTaskFollow({
              ...data,
              // billId: this.detailId,
              userId: this.userId,
            })
            .then((res) => {
              if (!res.msg) {
                this.$notify({
                  message: '添加成功',
                  type: 'success',
                })
                this.$router.go(-1)
              }
            })
        })
        .catch(() => {
          this.$toast.fail('请完善信息')
        })
    },
    handleTel(tel) {
      if (isPhone()) {
        window.location.href = `tel:${tel}`
      } else {
        Toast('请在手机端使用此功能')
      }
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    // 获取维修中心
    getMainFixCenter() {
      commonApi
        .getMainFixCenter({
          type: 'fixCenter',
        })
        .then((res) => {
          this.fixCenterList = res.data
          res.data.forEach((item, index) => {
            if (item.billId == getCookies('orgId')) {
              this.formData.fixCenterId = item.billId
              this.formData.fixCenterName = item.name
            }
          })
        })
    },

    // 获取工单类型
    // getWorkBillType() {
    //   commonApi
    //     .getEnums({
    //       key: "workBillTypeNew",
    //     })
    //     .then((res) => {
    //       if (res.data) {
    //         this.workBillTypeList = this.formatCheckData(res.data);
    //       }
    //     });
    // },
    // 获取预约类型
    getBookingTypeList() {
      commonApi
        .getEnums({
          key: 'bookingType',
          userId: this.userId,
        })
        .then((res) => {
          if (res.data) {
            this.bookingTypeList = res.data
            this.formData.bookingType = 3
            this.formData.bookingName = '招揽专员预约'
          }
        })
    },
    // 获取维修价格
    // getRepairpricetype() {
    //   commonApi.getRepairpricetype({}).then((res) => {
    //     if (res.data) {
    //       this.repairpricetypeList = res.data;
    //       res.data.forEach((item) => {
    //         if (item.name == "标准单价") {
    //           this.formData.repairpricetypeId = item.billId;
    //         }
    //       });
    //     }
    //   });
    // },
    // 获取配件价格
    // getMaterialPriceType() {
    //   commonApi
    //     .getMaterialPriceType({ fixCenterId: localStorage.getItem("orgId") })
    //     .then((res) => {
    //       if (res.data) {
    //         this.materialPriceList = res.data;
    //         res.data.forEach((item) => {
    //           if (item.name == "标准价格") {
    //             this.formData.materialPriceId = item.billId;
    //           }
    //         });
    //       }
    //     });
    // },
    // 格式化多选数据
    formatCheckData(data) {
      data.forEach((item) => {
        item.check = false
      })
      return data
    },
  },
}
</script>

<style lang="less" scoped>
body {
  // background: #f3f3f3;
}
.flex {
  display: flex;
  align-items: center;
}
.registerDetail {
  background: #f3f3f3;
  overflow: hidden;
  .detail_header {
    justify-content: space-between;
    margin: 0.2rem 0.2rem;
    border-radius: 5px;
    background: #fff;
    padding: 0.3rem;
    .detail_header_lt {
      .carNo {
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.2rem;
        .carStatus {
          border: 1px solid #35bc04;
          color: #35bc04;
          border-radius: 5px;
          padding: 0.1rem 0.1rem;
          font-size: 0.24rem;
          text-align: center;
          margin-left: 0.1rem;
        }
      }
      .hank {
        font-size: 0.28rem;
        color: #666;
        .name {
          border-right: 2px solid #ccc;
          padding-right: 0.1rem;
          margin-right: 0.1rem;
        }
      }
    }
    .detail_header_rt {
      justify-content: flex-start;
      .txt {
        font-size: 0.28rem;
        color: #161616;
      }
      .icon-tel {
        color: #fff;
        background: #35bc04;
        font-size: 0.32rem;
        padding: 0.1rem;
        border-radius: 50%;
        margin-right: 0.1rem;
      }
    }
  }
  .formData {
    background: #fff;
    overflow: hidden;
  }
}

.submitBtn {
  background: #409eff;
  color: #fff;
  width: 75%;
  margin: auto;
  text-align: center;
  padding: 0.25rem;
  border-radius: 5px;
  margin-top: 0.6rem;
  font-size: 0.3rem;
  margin-bottom: 0.5rem;
}
.voicebox {
  position: relative;
  .icon-voice {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 20px;
    color: #409eff;
  }
}
</style>
